<template>
  <div class="qa-wrappper">
    <div class="qa" v-for="(i, d) in qadata" :key="i">
         <div class="title">{{d.title}}</div>
         <template v-if="d.type==='title'">
          <template v-for="(j, c) in d.children">
              <div class="qa-title" :key="j">
                <span class="qa-label" :class="'qa-label-'+ c.type">{{QA_TYPE[c.type]}}</span>
                <span class="t1">{{c.title}}</span>
              </div>
              <div class="qa-content" :key="j">
                <template v-if="c.type === 'radio'" v-for="(index, r) in c.options">
                  <!--<mu-radio :label="r.label"  :key="index" :nativeValue="r.value" v-model="c.model" />-->
                  <input type="radio" :value="r.value" v-model="c.model" :key="index">{{r.label}}
                  <br :key="index" />
                </template>
                <template v-if="c.type === 'checkbox'" v-for="(index, r) in c.options">
                  <!--<mu-checkbox :label="r.label" :key="index" :nativeValue="r.value" v-model="c.model" />-->
                  <input type="checkbox" :value="r.value" v-model="c.model" :key="index">{{r.label}}
                </template>
                <template v-if="c.type === 'input'">
                  <template  v-for="(index, r) in c.options" >
                    <!--<mu-text-field v-if="r.placeholder !== 'yyyy-MM-dd'" :hintText="r.placeholder" :label="r.label" :key="index" :nativeValue="r.value" v-model="c.model" fullWidth/>-->
                    <textarea cols="30" rows="1" v-if="r.placeholder !== 'yyyy-MM-dd'" v-model="c.model"></textarea>
                    <!--<mu-date-picker v-else :hintText="r.placeholder" :label="r.label" :key="index" v-model="c.model" fullWidth/>-->
                    <input type="text" v-model="c.model" v-else/>
                  </template>
                </template>
              </div>
          </template>
         </template>
         <template v-else>
           <div class="qa-title" :key="i">
              <span class="qa-label" :class="'qa-label-'+ d.type">{{QA_TYPE[d.type]}}</span>
              <span class="t1">{{d.title}}</span>
            </div>
            <div class="qa-content" :key="i">
              <template v-if="d.type === 'radio'" v-for="(index, r) in d.options">
                <!--<mu-radio :label="r.label"  :key="index" :nativeValue="r.value" v-model="d.model" />-->
                <input type="radio" :key="index" :value="r.value" v-model="d.model">{{r.label}}
                <br :key="index" />
              </template>
              <template v-if="d.type === 'checkbox'" v-for="(index, r) in d.options">
                <!--<mu-checkbox :label="r.label" :key="index" :nativeValue="r.value" v-model="d.model" />-->
                <input type="checkbox" :key="index" :value="r.value" v-model="d.model">{{r.label}}
              </template>
              <template v-if="d.type === 'input'">
                <!--<mu-text-field :label="r.label" v-for="(r, index) in d.options" :key="index" :nativeValue="r.value" v-model="d.model" fullWidth/>-->
                <textarea cols="30" rows="2" v-for="(index, r) in d.options" :key="index" v-model="d.model"></textarea>
              </template>
            </div>
         </template>
    </div>
    <div class="flex flex_center">
      <!--<mu-raised-button label="提交" fullWidth primary class="btn-login" @click="submit" :disabled="!canSubmit">-->
        <!--</mu-raised-button>-->
      <button @click="submit" :disabled="!canSubmit" class="longBtn">填写完成</button>
    </div>
  </div>
</template>

<script>
  import Public from 'assets/public.js'
const QA_TYPE = {
  radio: '单选',
  checkbox: '多选',
  input: '填空'
}
export default {
  props: ['qadata', 'defaultQadata'],
  data () {
    return {
      QA_TYPE: QA_TYPE,
      patientInfo: JSON.parse(sessionStorage.getItem('patientInfo'))
    }
  },
  computed: {
    canSubmit () {
      let childFinished = false
      let parentFinished = this.qadata.every(v => {
        if (v.type !== 'title') {
          return v.model.length !== 0
        } else {
          return true
        }
      })
      this.qadata.forEach(ele => {
        if (ele.children && ele.children.length > 0) {
          childFinished = ele.children.every(v => v.model.length !== 0)
        } else {
          childFinished = true
        }
      })
      return childFinished && parentFinished
    }
  },
  methods: {
    validateData () {
      return false
    },
    submit () {
      let p = this.patientInfo
      console.log(JSON.stringify(p))
      let df = this.defaultQadata
      let params = {
        SFJH: this.patientInfo.GZID,
        TXGH: '12332', // test
        BRLX: this.patientInfo.BRLX,
        JLXH: 0,
        ZYH: this.patientInfo.BRLX === '1' ? this.patientInfo.patient.ZYHM : this.patientInfo.ZYH,
        BRBQ: this.patientInfo.patient.BRBQ || '',
        YSXH: df.YSXH,
        BBH: df.BBH,
        YSLX: df.YSLX,
        TXSJ: this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        JGID: 1,
        PGNR: '',
        TXXM: this.patientInfo.patient.BRXM,
        details: this.getAllList()
      }
      $.ajax({
        type:"POST",
        url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/commit/record",
        headers: {
          "token": sessionStorage.getItem('sfToken')
        },
        contentType: 'application/json',
        data:JSON.stringify(params),
        beforeSend: function (req) {
          req.setRequestHeader("Accept", "application/json");
        },
        success:function(res){
          if (res.Data) {
            Public.ajaxPrompt("保存成功")
          } else {

          }
        }
      })
    },
    getAllList (arr) {
      let temp = []
      if (arr.length === 0) {
        return temp
      }
      arr.forEach(val => {
        if (val.type === 'title' && val.children && val.children.length > 0) {
          val.children.forEach(v => {
            // type=checkbox合并选项为 a,b,c,d
            // 保持和出参一致
            if (v.type === 'input') {
              temp = temp.concat(this.getInputList(v))
            // checkbox
            } else if (v.type === 'checkbox') {
              temp = temp.concat(this.getCheckboxList(v))
            } else if (v.type === 'radio') {
              temp = temp.concat(this.getRadioList(v))
            }
          })
        } else {
          // input
          if (val.type === 'input') {
            temp = temp.concat(this.getInputList(val))
          // checkbox
          } else if (val.type === 'checkbox') {
            temp = temp.concat(this.getCheckboxList(val))
          } else if (val.type === 'radio') {
            temp = temp.concat(this.getRadioList(val))
          }
        }
      })
      return temp
    },
    getInputList (val) {
      // todo
      let temp = []
      val.options.forEach(v => {
        if (v.model && v.model.length > 0) {
          temp.push({
            XMNR: v.model,
            KJLX: v.KJLX,
            XMXH: v.XMXH
          })
        }
        if (v.children && v.children.length > 0) {
          temp = temp.concat(this.getAllList(v.children))
        }
      })
      return temp
    },
    getRadioList (val) {
      // todo
      let temp = []
      if (val.model.length > 0) {
        temp.push({
          XMNR: val.model,
          KJLX: val.KJLX,
          XMXH: val.XMXH
        })
      }
      val.options.forEach(v => {
        if (v.children && v.children.length > 0) {
          temp = temp.concat(this.getAllList(v.children))
        }
      })
      return temp
    },
    getCheckboxList (val) {
      // todo
      let temp = []
      if (val.model.length > 0) {
        temp.push({
          XMNR: val.model.join(','),
          KJLX: val.KJLX,
          XMXH: val.XMXH
        })
      }
      return temp
    },
    formatDate (date, fmt) {
      let padLeftZero = str => ('00' + str).substr(str.length)
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
        }
      }
      return fmt
    }

  }
}
</script>

<style lang="less">
@import '../assets/vars.less';
@import '../assets/flex.css';
.qa-login {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
.qa {
  border-bottom: 1px solid @color-border;
  padding: 10px;
  .title {
    margin: 10px 0;
    padding-left: 10px;
    border-left:4px solid @color-primary;
  }
  .mu-text-field-input {
    border: 1px solid #eee;
    padding: 0 10px;
  }
  .qa-label {
    height: 18px;
    width: 40px;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    padding-left: 8px;
    &.qa-label-radio{
      background-image: url(../assets/img/jsszy/tab_单选@2x.png);
      background-size: cover;
    }
    &.qa-label-checkbox {
      background-image: url(../assets/img/jsszy/tab_多选@2x.png);
      background-size: cover;
    }
    &.qa-label-input {
      background-image: url(../assets/img/jsszy/tab_填空@2x.png);
      background-size: cover;
    }
  }
  .qa-content {
    padding-top: 10px;

  }
}
</style>
